<template>
  <div class="app-container">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-form ref="itemInfo" label-width="80px" disabled>
        <el-form-item label="商品名称" prop="itemName">
          <el-col :span="12" >
            <el-input v-model="itemInfo.itemName" maxlength="30" show-word-limit/>
          </el-col>
        </el-form-item>
        <el-form-item label="商品简介" prop="simpleDesc">
          <el-col :span="12" >
            <el-input v-model="itemInfo.simpleDesc" type="textarea" maxlength="100" show-word-limit :autosize="{ minRows: 1, maxRows: 2}" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="商品类目" required>
          <el-col :span="6" >
            <el-cascader v-model="categoryIds" :options="categoryOptions"
              :props="{value: 'key', label: 'value', children: 'children', expandTrigger: 'hover'}" />
          </el-col>
        </el-form-item>
        <el-form-item label="主图" required>
          <el-col :span="6" >
            <el-image class="item-image" :src="itemInfo.primaryPic" />
          </el-col>
        </el-form-item>
        <el-form-item label="轮播图" required>
          <div class="item-swiper-list">
            <el-image v-for="pic in itemInfo.swiperPics" class="item-image" :src="pic"/>
          </div>
        </el-form-item>
        <el-form-item label="商品详情" prop="dictLabel">
          <el-col :span="12" >
            <quill-editor
              class="editor"
              v-model="itemInfo.detail"
              ref="detailEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
            ></quill-editor>
          </el-col>
        </el-form-item>
        <div style="height: 50px">
        </div>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="itemInfo.sort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="状态" prop="itemStatus">
          <el-radio-group v-model="itemInfo.itemStatus">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-col :span="12" >
            <el-input v-model="itemInfo.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品规格</span>
      </div>
      <div style="margin-top: 20px" v-for="(spec, index) in itemInfo.specList">
        <div class="spec-header">
          <el-row>
            <el-col :span="4">
              <span>{{spec.name}}</span>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 10px">
          <el-tag v-for="specOption in spec.options" >{{specOption.option}}</el-tag>
        </div>
      </div>

      <el-divider></el-divider>
      <div class="clearfix" style="margin-bottom: 10px;">
        <span>SKU列表</span>
      </div>
      <el-table :data="itemInfo.skuList">
        <el-table-column prop="itemNo" label="货号" />
        <el-table-column prop="retailPrice" label="销售价" />
        <el-table-column prop="activityPrice" label="活动价" />
        <el-table-column prop="stockNum" label="库存" />
        <el-table-column prop="skuStatus" label="上下架" />
        <el-table-column v-for="spec in itemInfo.specList" prop="specNames" :label="spec.name" :formatter="specFormatter" />
      </el-table>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品属性</span>
      </div>
      <el-table :data="itemInfo.attrList">
        <el-table-column property="attrName" label="属性名称" />
        <el-table-column property="attrValue" label="属性值" />
      </el-table>
    </el-card>

    <el-backtop target=".app-container"></el-backtop>
  </div>
</template>

<script>
  import { getItem } from "@/api/item/item";
  import { quillEditor } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

  export default {
    name: "ItemInfo",
    components: {
      quillEditor
    },
    data() {
      return {
        editorOption: {
          theme: "snow",
          placeholder: "请输入内容",
          modules: {
            toolbar: {
              container: []
            }
          }
        },
        // 遮罩层
        loading: true,
        itemInfo: {
          // 基础信息
          itemId: undefined,
          itemName: undefined,
          simpleDesc: undefined,
          primaryPic: undefined,
          categoryId: undefined,
          swiperPics: [],
          detail: '',
          sort: undefined,
          itemStatus: 0,
          remark: '',
          // sku
          skuList: [],
          // 商品规格
          specList: [],
          // 商品属性
          attrList: []
        },
        categoryOptions: [],
        categoryIds: []
      };
    },
    created() {
      const itemId = this.$route.query && this.$route.query.itemId;
      if (itemId) {
        this.getItem(itemId);
      }
      this.getOptions("item-category").then(response => {
        this.categoryOptions = response.data.options;
      });
    },
    methods: {
      /** 查询字典类型详细 */
      getItem(itemId) {
        getItem(itemId).then(response => {
          this.itemInfo = response.data;
          this.categoryIds = ['' + this.itemInfo.category.pid, '' + this.itemInfo.category.id];
        });
      },
      onEditorBlur() {
        //失去焦点事件
        this.$refs.detailEditor.quill.enable(false);
      },
      onEditorFocus() {
        //获得焦点事件
        this.$refs.detailEditor.quill.enable(false);
      },
      specFormatter(row, column) {
        for (let specOption of row.specOptions) {
          if (specOption.spec === column.label) {
            return specOption.option;
          }
        }
        return "";
      },
    }
  }
</script>

<style>
  .el-card {
    margin-bottom: 10px;
  }

  .item-swiper-list {
    display: flex;
    flex-wrap: wrap;
  }

  .item-image {
    width: 148px;
    height: 148px;
    display: block;
    margin-right: 10px;
  }

  .editor {
    line-height: normal !important;
    height: 500px;
  }
</style>
